<template>
  <div class="brain-chart">
    <!-- 脑区选择器 -->
    <div class="brain-selector">
      <div 
        :class="['selector-item', { active: selectedBrain === 'left' }, { disabled: disabled }]" 
        @click="disabled ? null : switchBrain('left')">
        左脑
      </div>
      <div 
        :class="['selector-item', { active: selectedBrain === 'right' }, { disabled: disabled }]" 
        @click="disabled ? null : switchBrain('right')">
        右脑
      </div>
    </div>
    
    <!-- 图表容器 -->
    <div class="chart-container">
      <l-echart
        ref="chartRef"
        @finished="initChart"></l-echart>
    </div>
  </div>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

export default {
  name: 'BrainChart',
  
  props: {
    // 图表类型: 'sensitivity', 'stability', 'accuracy'
    chartType: {
      type: String,
      required: true
    },
    // 是否禁用交互
    disabled: {
      type: Boolean,
      default: false
    },
    // 左脑数据
    leftBrainData: {
      type: Array,
      default: () => []
    },
    // 右脑数据
    rightBrainData: {
      type: Array,
      default: () => []
    },
    // 数据索引计数器
    dataIndexCounter: {
      type: Number,
      default: 0
    }
  },
  
  data() {
    return {
      selectedBrain: 'left',
      chartOption: this.createChartBaseOption()
    }
  },
  
  watch: {
    // 监听数据变化，更新图表
    leftBrainData() {
      this.updateChart()
    },
    rightBrainData() {
      this.updateChart()
    },
    // 监听禁用状态变化
    disabled(newVal) {
      if (newVal) {
        // 禁用时不做任何操作
      } else {
        // 启用时重新初始化图表
        this.resetChart()
        this.initChart()
      }
    }
  },
  
  methods: {
    /**
     * 创建图表基础配置
     */
    createChartBaseOption() {
      return {
        title: { text: '' },
        tooltip: {
          trigger: 'axis',
          show: false,  // 禁用提示框
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: Array.from({ length: 101 }, (_, i) => i), // 默认显示0-100的连续数字
          axisLabel: {
            color: '#666',
            formatter: function (value) {
              return value
            },
            interval: 'auto', // 自动计算标签间隔，避免标签重叠
          },
          silent: true, // 禁用x轴交互
        },
        yAxis: {
          type: 'value',
          name: '阻抗值',
          min: 0,
          axisLabel: {
            color: '#666',
          },
          silent: true, // 禁用y轴交互
        },
        series: [
          {
            name: '阻抗值',
            type: 'line',
            showSymbol: false,
            data: [], // 默认为空数组，不显示任何数据点
            lineStyle: {
              width: 3,
              color: '#4de6c2',
            },
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: '#4de6c2',
            },
            silent: true, // 禁用系列交互
          },
        ],
        silent: true, // 禁用整个图表的交互
        animation: false,  // 禁用动画
        hoverLayerThreshold: Infinity,  // 禁用hover层
      }
    },
    
    /**
     * 初始化图表
     */
    async initChart() {
      // 检查图表引用是否存在
      if (!this.$refs.chartRef) return

      // 初始化图表
      const chart = await this.$refs.chartRef.init(echarts, {
        renderer: 'canvas',
        useDirtyRect: false
      })

      // 更新x轴数据和系列数据
      this.updateChartData()

      // 设置图表选项并禁用交互
      this.chartOption.tooltip.show = false // 确保禁用提示框
      this.chartOption.animation = false // 确保禁用动画
      this.chartOption.hoverLayerThreshold = Infinity // 确保禁用hover层
      chart.setOption(this.chartOption, {
        notMerge: true, // 完全覆盖之前的设置
        lazyUpdate: false, // 立即更新
        silent: true // 静默更新，不触发事件
      })
      
      // 计算并发送EIT值变化率
      this.calculateAndEmitChangeRate()
    },
    
    /**
     * 更新图表数据
     */
    updateChartData() {
      // 根据选择的脑区获取对应的阻抗数据
      const impedanceData = this.selectedBrain === 'left' ? this.leftBrainData : this.rightBrainData
      
      // 获取阻抗数据数组长度
      const dataLength = impedanceData.length

      // 显示窗口大小（显示多少个数据点）
      const windowSize = 101
      
      let xAxisData
      let seriesData
      
      // 如果没有数据，使用默认配置
      if (dataLength === 0) {
        // 默认显示0-100的x轴范围
        xAxisData = Array.from({ length: windowSize }, (_, i) => i)
        // 默认不显示任何数据点
        seriesData = []
      } else if (dataLength <= windowSize) {
        // 数据量 <= windowSize 时，X轴仍然显示0-100
        xAxisData = Array.from({ length: windowSize }, (_, i) => i)
        // 系列数据显示所有收集到的数据点
        seriesData = impedanceData.slice(0, dataLength)
      } else {
        // 数据量 > windowSize 时，X轴开始滚动
        // 计算起始索引（总数据点 - 窗口大小）
        const startIndex = this.dataIndexCounter - windowSize + 1
        
        // X轴数据从 startIndex 到 dataIndexCounter
        xAxisData = Array.from({ length: windowSize }, (_, i) => startIndex + i)
        
        // 获取最近的windowSize个数据点
        seriesData = impedanceData.slice(dataLength - windowSize, dataLength)
      }
      
      // 更新x轴数据
      this.chartOption.xAxis.data = xAxisData
      
      // 更新系列数据
      this.chartOption.series[0].data = seriesData
    },
    
    /**
     * 更新图表
     */
    updateChart() {
      // 检查图表引用是否存在
      if (!this.$refs.chartRef || !this.$refs.chartRef.chart) return
      
      // 更新图表数据
      this.updateChartData()
      
      // 确保禁用所有交互
      this.chartOption.tooltip.show = false
      this.chartOption.animation = false
      this.chartOption.hoverLayerThreshold = Infinity
      
      // 设置图表选项并禁用交互
      this.$refs.chartRef.chart.setOption(this.chartOption, {
        notMerge: false, // 合并新旧配置，保持动画平滑
        lazyUpdate: true, // 延迟更新
        silent: true // 静默更新，不触发事件
      })
      
      // 计算并发送EIT值变化率
      this.calculateAndEmitChangeRate()
    },
    
    /**
     * 重置图表
     */
    resetChart() {
      if (this.$refs.chartRef && this.$refs.chartRef.chart) {
        this.$refs.chartRef.chart.dispose()
        this.$refs.chartRef.chart = null
      }
    },
    
    /**
     * 切换选择的脑区
     * @param {String} brain - 脑区，'left'或'right'
     */
    switchBrain(brain) {
      if (this.selectedBrain === brain) return
      
      this.selectedBrain = brain
      console.log('切换到', brain === 'left' ? '左脑' : '右脑')
      
      // 通知父组件脑区已切换
      this.$emit('brain-switched', brain)
      
      // 更新图表
      this.$nextTick(() => {
        this.updateChart()
      })
    },
    
    /**
     * 计算EIT值变化率
     */
    calculateAndEmitChangeRate() {
      // 根据选择的脑区获取对应的阻抗数据
      const impedanceData = this.selectedBrain === 'left' ? this.leftBrainData : this.rightBrainData
      
      // 如果没有数据或只有一个数据点，返回0%
      if (impedanceData.length <= 1) {
        this.$emit('change-rate-updated', '0%')
        return
      }

      // 只考虑最近的100个数据点（如果有的话）
      const recentData = impedanceData.slice(Math.max(0, impedanceData.length - 100))
      
      // 找出最近数据中的最大值和最小值
      const maxValue = Math.max(...recentData)
      const minValue = Math.min(...recentData)

      // 如果最小值为0，为避免除以0的错误，返回特殊值
      if (minValue === 0) {
        this.$emit('change-rate-updated', '∞')
        return
      }

      // 计算变化率：(最大值-最小值)/最小值*100
      const changeRate = ((maxValue - minValue) / minValue) * 100

      // 格式化为两位小数的百分比
      const formattedRate = changeRate.toFixed(2) + '%'
      
      // 发送变化率到父组件
      this.$emit('change-rate-updated', formattedRate)
    }
  },
  
  mounted() {
    // 组件挂载后初始化图表
    this.$nextTick(() => {
      this.initChart()
    })
  },
  
  beforeDestroy() {
    // 组件销毁前清理图表实例
    this.resetChart()
  }
}
</script>

<style scoped lang="scss">
.brain-chart {
  width: 100%;
  
  .brain-selector {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    
    .selector-item {
      padding: 6px 20px;
      cursor: pointer;
      font-size: 14px;
      color: #666;
      transition: all 0.3s ease;
      border-radius: 20px;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      text-align: center;
      min-width: 80px;
      
      &:hover {
        color: #4a90e2;
        border-color: #4a90e2;
      }
      
      &.active {
        color: #4de6c2;
        font-weight: bold;
        border: 1px solid #4de6c2;
        box-shadow: 0 2px 6px rgba(77, 230, 194, 0.3);
      }
      
      &.disabled {
        color: #ccc;
        cursor: not-allowed;
        border-color: #ddd;
        background-color: #f0f0f0;
        opacity: 0.7;
        
        &:hover {
          color: #ccc;
          border-color: #ddd;
        }
        
        &.active {
          color: #4de6c2;
          opacity: 0.8;
        }
      }
    }
  }

  .chart-container {
    height: 240px;
    width: 100%;
  }
}
</style> 